<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div id="box">
			<ul class="tab">
				<li><input type="checkbox" name="" id="" value="" class="checkall" />全选</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>合计</li>
			</ul>
			<ul class="tab-content">
				<li><input type="checkbox" name="" id="" value="" class="single" /></li>
				<li>炫龙笔记本</li>
				<li class="price">5299</li>
				<li>
					<button type="button" class="addition">+</button>
					<input type="text" name="" id="" value="1" class="texto" />
					<button type="button" class="subtract">-</button>
				</li>
				<li class="sumlislis">5299</li>
			</ul>
 
			<ul class="tab-content">
				<li><input type="checkbox" name="" id="" value="" class="single" /></li>
				<li>炫龙笔记本</li>
				<li class="price">5799</li>
				<li>
					<button type="button" class="addition">+</button>
					<input type="text" name="" id="" value="1" class="texto" />
					<button type="button" class="subtract">-</button>
				</li>
				<li class="sumlislis">5799</li>
			</ul>
			<ul class="tab-content">
				<li><input type="checkbox" name="" id="" value="" class="single" /></li>
				<li>炫龙笔记本</li>
				<li class="price">4499</li>
				<li>
					<button type="button" class="addition">+</button>
					<input type="text" name="" id="" value="1" class="texto" />
					<button type="button" class="subtract">-</button>
				</li>
				<li class="sumlislis">4499</li>
			</ul>
			<div class="tot">
				总计<span></span>
			</div>
		</div>

        <script type="text/javascript">
            //获取总表单数量
            var conent = document.querySelectorAll('.tab-content')
            //获取单价
            var price = document.querySelectorAll('.price')
            //获取加号
            var addition = document.querySelectorAll('.addition')
            //获取减号
            var subtract = document.querySelectorAll('.subtract')
            //循环添加自定义属性
            var text = document.querySelectorAll('.texto')
            //获取小计
            var sumlis = document.querySelectorAll('.sumlislis')
            //表单元素
            //获取合计总金额
            var total = document.querySelector('.tot')
            var spintext = total.querySelector('span')
            //获取单选
            var single = document.querySelectorAll('.single')
            //获取多选
            var checkall = document.querySelector('.checkall')
            for (var i = 0; i < conent.length; i++) {
                price[i].setAttribute('pric', i)
                addition[i].setAttribute('addindex', i)
                subtract[i].setAttribute('subindex', i)
                //加
                addition[i].addEventListener('click', function() {
                    var textindex = this.getAttribute('addindex')
                    //当前变为true
                    single[textindex].checked = true
                    //保存返回值
                    var boold = dx()
                    //单击事件 先检查是否有未选中的
                    if (boold == false) {
                        checkall.checked = false
                    }
                    //获取当前表格内数值
                    var textnumber = parseInt(text[textindex].value)
                    var sum = textnumber + 1
                    text[textindex].value = sum
                    var pric = parseInt(price[textindex].innerText)
                    sumlis[textindex].innerText = pric * sum
                    //调用求和事件
                    total()
                })
                //减
                subtract[i].addEventListener('click', function() {
                    var textindex = this.getAttribute('subindex')
                    var textnumber = parseInt(text[textindex].value)
                    var boold = dx()
                    //单击事件 先检查是否有未选中的
                    if (boold == false) {
                        checkall.checked = false
                    }
                    var sum = textnumber
                    sum = textnumber - 1
                    text[textindex].value = sum
                    var pric = parseInt(price[textindex].innerText)
                    sumlis[textindex].innerText = pric * sum
                    total()
                    single[textindex].checked = true
                    if (sum <= 0) {
                        single[textindex].checked = false
                        checkall.checked = false
                        text[textindex].value = 0
                        total()
                        sumlis[textindex].innerText = 0
                    }
        
                })
                //全选
                checkall.addEventListener('click', function() {
                    this.checked = this.checked
                    for (var i = 0; i < single.length; i++) {
                        single[i].checked = this.checked
                    }
                    total()
                })
                //单选
                for (var a = 0; a < single.length; a++) {
                    single[a].addEventListener('click', dx)
                }
        
                function dx() {
                    var boo = this.checked
                    this.checked = boo
                    total()
                    var flag = true
                    for (var a = 0; a < single.length; a++) {
                        if (single[a].checked != true) {
                            flag = false
                        }
                        checkall.checked = flag
                    }
                    return flag
                }
                //计算总金额
                function total() {
                    var totalsum = 0
                    for (var i = 0; i < conent.length; i++) {
                        if (single[i].checked == true) {
                            totalsum += parseInt(sumlis[i].innerText)
                        }
                    }
                    spintext.innerText = totalsum
                }
            }
        </script>
</body>
</html>